<template>
  <el-affix :offset="0">
    <CommonHeader :condition="conditions" />
  </el-affix>

  <div style="min-height: 100vh;">
    <div class="main">
      <!-- 留言板详情 -->
      <div class="card">
        <div>
          <div style="font-size: 20px; font-weight: 700">{{ info.title }}</div>
          <div class="title">
            <div style="display: flex; font-size: 13px">
              <div style="color: rgb(153, 153, 153)">作者：</div>
              <div class="none" style="cursor: pointer; color: #4ca9ff">{{ info.userInfo.tbUserInfo.nickname }}</div>
            </div>
          </div>
          <div class="time">发布时间：{{ Tools.formatDate(info.lastupdate) }}</div>
          <div><pre class="info" v-html="info.info"></pre></div>
          <div class="footer">
            <div class="button none" @click="messlikeAdd(info.mid)">{{ info.praise }}点赞量</div>
            <div class="button none" @click="messreport(info.mid)">举报</div>
          </div>
        </div>
      </div>
      <!-- 留言板发表评论 -->
      <div class="card">
        <div style="font-size: 13px; margin-bottom: 1rem; color: rgb(153, 153, 153)">看帖是喜欢，评论才是真爱：</div>
        <div>
          <ElInput :rows="4" type="textarea" v-model="reply_info.info" placeholder="请开始你的表演..."></ElInput>
        </div>
        <div style="margin-top: 1rem; display: flex; justify-content: flex-end"><ElButton type="primary" @click="reply()">发布</ElButton></div>
      </div>
      <!-- 留言板全评论 -->
      <div class="card">
        <div>评论：</div>
        <div class="card-box" v-for="d in replyinfo">
          <div class="t-fo">
            <ElAvatar class="none" :src="d.userInfo.tbUserInfo.img"></ElAvatar>
            <div>
              <div style="font-size: 16px">{{ d.userInfo.tbUserInfo.nickname }}</div>
              <div style="font-size: 10px; margin-top: 5px">{{ Tools.formatDate(d.lastupdate) }}</div>
            </div>
          </div>
          <div class="d-info">{{ d.info }}</div>
          <div class="footer">
            <div class="button none" @click="replylikeAdd(d.mrid)">{{ d.praise }}点赞</div>
            <div class="button none" @click="rolereport(d.mrid)">举报</div>
          </div>
        </div>
      </div>
    </div>
  </div>
<!-- 举报留言 -->
  <el-dialog v-model="messreportdialog" title="留言举报" width="30%" center>
    <ElInput v-model="messinfo.info" placeholder="举报原因"></ElInput>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="messreportdialog = false">退出</el-button>
        <el-button type="primary" @click="messreportss()">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
<!-- 举报评论 -->
  <el-dialog v-model="rolereportdialog" title="评论举报" width="30%" center>
    <ElInput v-model="roleinfo.info" placeholder="举报原因"></ElInput>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="rolereportdialog = false">退出</el-button>
        <el-button type="primary" @click="rolereportss()">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { L12030 } from '../../api/L12030'
import { Tools } from '../../ts/Tools'
import { ElAvatar, ElInput, ElButton, ElMessageBox,ElLoading, ElAffix ,ElDialog} from 'element-plus'
import CommonHeader from '../../components/CommonHeader.vue'
// #region 留言板详情
const replyinfo = ref([])
const info = ref([])
const conditions = ref('前端')
const route = useRoute()
const mid = route.params.id

const queryInfo = ref({
  mid: mid,
  orderBy: 1,
})

function query() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  L12030.get(`/message/${queryInfo.value.mid}`, {}, (data: any) => {
    if (data.success) {
      loading.close()
      console.log(data.data)
      info.value = data.data
      replyinfo.value = data.data.replies
    }
  })
}
// #endregion

//#region 点赞操作
// 帖子点赞
function messlikeAdd(mid: any) {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  L12030.post(`/message/${mid}`, {}, (data: any) => {
    if (data.success) {
      loading.close()
      location.reload();
    } else {
      ElMessageBox.alert(data.message)
    }
  })
}

//回帖点赞
function replylikeAdd(mrid:any){
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  L12030.post(`/reply/${mrid}`,{},(data:any)=>{
    if (data.success) {
      loading.close()
      location.reload();
    } else {
      ElMessageBox.alert(data.message)
    }
  })
}

//#endregion

// #region 留言板评论
const reply_info = ref({
  mid: mid,
  info: '',
})

function reply() {
  L12030.post('/reply', reply_info.value, (data: any) => {
    ElMessageBox.alert(data.message).then(query)
  })
}
// #endregion
query()

//#region 举报留言
const messreportdialog=ref(false)
const messinfo=ref({
  mid:0,
  info:''
})
function messreport(info:any){
  messreportdialog.value=true
  messinfo.value.mid=info;
}

function messreportss(){
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  L12030.post('/message/report',messinfo.value,(data:any)=>{
    if(data.success){
      loading.close()
      messreportdialog.value=false
      location.reload();
    }else{
      ElMessageBox.alert(data.message)
    }
  })
}
//#endregion

//#region 举报评论
const rolereportdialog=ref(false)
const roleinfo=ref({
  mrid:0,
  info:''
})
function rolereport(info:any){
  rolereportdialog.value=true
  roleinfo.value.mrid=info;
}

function rolereportss(){
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  L12030.post('/reply/report',roleinfo.value,(data:any)=>{
    if(data.success){
      loading.close()
      rolereportdialog.value=false
      location.reload();
    }else{
      ElMessageBox.alert(data.message)
    }
  })
}
//#endregion

</script>

<style lang="scss" scoped>
.none {
  //元素不可被选中
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.button {
  cursor: pointer; //鼠标悬停样式（手指）
  transition: color 0.3s; //颜色转换时间
  &:hover {
    color: #4ca9ff; //鼠标悬停时字体颜色
  }
}
.card {
  border-radius: 5px; // 圆角
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); // 卡片阴影
  background-color: #fff; // 卡片背景色
  padding: 40px; // 卡片内边距
  margin: 20px; // 卡片外边距
  overflow: hidden; // 溢出隐藏
  opacity: 0.7; 
  .card-box {
    padding: 40px; // 卡片内边距
    margin: 20px; // 卡片外边距
  }
  .card-box:not(:last-child) {
    border-bottom: 1px solid #dcdcdc;
  }
}
.main {
  width: 60%;
  padding: 1rem;
  margin: 0px auto;
}
.title {
  display: flex;
  align-items: flex-start;
  margin: 15px 0px 15px 0px;
  padding: 8px 8px 8px 8px;
  background-color: rgb(247, 248, 252);
  background-size: 50% 50%;
}
.time {
  font-size: 13px;
  margin-top: 5px;
  text-align: center;
  color: rgb(153, 153, 153);
}
.info {
  font-family: '微软雅黑', serif;
  font-size: 13px;
  white-space: pre-wrap;
}
.t-fo {
  display: flex;
  align-items: flex-start;
}
.d-info {
  display: inline-block;
  padding: 1rem 0px;
}
.footer {
  display: flex;
  font-size: 12px;
  gap: 8px 15px; //行间距
  align-items: center; //垂直居中
  justify-content: flex-end;
}
</style>
